<!doctype html>
<html class="no-js" lang="zxx">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Book Shop</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/icon/favicon.png">

    <!-- CSS here -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/css/slicknav.css">
    <link rel="stylesheet" href="assets/css/animate.min.css">
    <link rel="stylesheet" href="assets/css/price_rangs.css">
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <link rel="stylesheet" href="assets/css/fontawesome-all.min.css">
    <link rel="stylesheet" href="assets/css/themify-icons.css">
    <link rel="stylesheet" href="assets/css/slick.css">
    <link rel="stylesheet" href="assets/css/nice-select.css">
    <link rel="stylesheet" href="assets/css/style.css">

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
</head>
<body>
<div id="app">
    <!-- header end -->
    <main class="login-bg">
        <!-- Register Area Start -->
        <div class="register-form-area">
            <div class="register-form text-center">
                <!-- Login Heading -->
                <div class="register-heading">
                    <span>注册</span>
                    <p>欢迎注册易购书城</p>
                </div>
                <!-- Single Input Fields -->
                <div class="input-box">
                    <div class="single-input-fields">
                        <label>Full name</label>
                        <input type="text" v-model="user.username" placeholder="请输入账号">
                    </div>
                    <div class="single-input-fields">
                        <label>Email Address</label>
                        <div style="position: relative">
                            <input v-model="user.email" type="email" placeholder="请输入邮箱" style="width: 79%;position: absolute;left: 0px">
                            <button style="position: absolute;right: 0px;height: 50px" class="genric-btn info-border radius" @click="getCode">获取验证吗</button>
                        </div>
                    </div>
                    <div class="single-input-fields" style="margin-top: 60px">
                        <label>Password</label>
                        <input type="password" v-model="user.password" placeholder="请输入密码">
                    </div>
                    <div class="single-input-fields">
                        <label>验证码</label>
                        <input type="text" v-model="user.code" placeholder="请输入验证码">
                    </div>
                </div>
                <!-- form Footer -->
                <div class="register-footer">
                    <p> 您已经有账号? <a href="login.html"> 登录</a></p>
                    <button class="submit-btn3" @click="register">注册</button>
                </div>
            </div>
        </div>
        <!-- Register Area End -->
    </main>
</div>
<!-- JS here -->
<!-- Jquery, Popper, Bootstrap -->
<script src="./assets/js/vendor/modernizr-3.5.0.min.js"></script>
<script src="./assets/js/vendor/jquery-1.12.4.min.js"></script>
<script src="./assets/js/popper.min.js"></script>
<script src="./assets/js/bootstrap.min.js"></script>

<!-- Slick-slider , Owl-Carousel ,slick-nav -->
<script src="./assets/js/owl.carousel.min.js"></script>
<script src="./assets/js/slick.min.js"></script>
<script src="./assets/js/jquery.slicknav.min.js"></script>

<!--wow , counter , waypoint, Nice-select -->
<script src="./assets/js/wow.min.js"></script>
<script src="./assets/js/jquery.magnific-popup.js"></script>
<script src="./assets/js/jquery.nice-select.min.js"></script>
<script src="./assets/js/jquery.counterup.min.js"></script>
<script src="./assets/js/waypoints.min.js"></script>
<script src="./assets/js/price_rangs.js"></script>

<!-- contact js -->
<script src="./assets/js/contact.js"></script>
<script src="./assets/js/jquery.form.js"></script>
<script src="./assets/js/jquery.validate.min.js"></script>
<script src="./assets/js/mail-script.js"></script>
<script src="./assets/js/jquery.ajaxchimp.min.js"></script>

<!--  Plugins, main-Jquery -->
<script src="./assets/js/plugins.js"></script>
<script src="./assets/js/main.js"></script>
</body>

<script>

    new Vue({
        el: "#app",
        data: {
            user: {email:""}
        },
        methods: {
            register() {
                axios.post(`/register`, this.user).then(({data}) => {
                    if (data.code == 200) {
                        alert("注册成功");
                        window.location.href = "login.html";
                    } else {
                        alert(data.data);
                    }
                })
            },
            getCode(){
                axios.get(`/getCode?email=${this.user.email}`).then(({data}) => {
                    if (data.code == 200) {
                        alert("发送成功");
                    } else {
                        alert("发送失败");
                    }
                }).catch(()=>{
                    alert("注册失败")
                })
            }
        }
    })
</script>
</html>